<template>
	<view class="content">
		<!-- 评价列表 -->
		<view class="lists" v-for="(item,index) in datas" :key="index" @click="gotoEvaluate(item.usr_id)">
			<view class="head"><image :src="item.usr_head"></image></view>
			<view class="name">{{item.usr_name}}</view>
		</view>
		<uni-load-more v-if="datas.length > 3" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
export default {
	data() {
		return {
			package_id:"",
			page: 1,
			reload: true,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多',
				contentnot: "没数据"
			},
			datas:[]
		};
	},
	onLoad(e) {
		this.package_id=e.package_id;
	},
	onShow() {
		this.datas=[];
		this.getuserList();
	},
	onPullDownRefresh() {
		this.reload = true;
		this.page = 1;
		this.getuserList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = this.page + 1;
		var _this = this;
		setTimeout(function() {
			_this.getuserList();
		}, 500);
	},
	methods: {
		gotoEvaluate:function(usr_id){
			uni.navigateTo({
				url:'record?student_id='+usr_id+'&package_id='+this.package_id
			})
		},
		getuserList:function(){
			var data={
				package_id:this.package_id,
				page:this.page,
				limit:8
			}
			this.$papi.apiPost('adminapi/moblie/stu/pack/getusers',data).then(res=>{
				if(res.data.code==200){
					var lists = res.data.data.list;
					this.datas = this.reload ? lists : this.datas.concat(lists);
					this.reload = false;
					this.status = 'more';
				} else {
					if (this.reload) {
						this.datas = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
					} else {
						this.status = "noMore";
					}
				}
			})
		}
	}
};
</script>

<style lang="scss">
.content {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(250, 250, 250, 1);
}

.lists {
	display: flex;
	justify-content: start;
	width: 92%;
	margin: auto;
	margin-top: 20upx;
	background: #ffffff;
	border-radius: 20upx;
	align-items: center;
	height: 120upx;
	.head {
		width: 80upx;
		height: 80upx;
		background: #0000ff;
		border-radius: 50%;
		margin-left: 20upx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	.name {
		margin-left: 10upx;
		font-size: 32upx;
		color: #333333;
	}
}
</style>
